<template>
	<view class="content shoujiclass bg_white">
		<view class="input-group2">
			<view class="input-row2">
				<text class="title">手机号码：</text>
				<view class="pL10 pT10 borderb1">
					<m-input type="number" focus clearable v-model="captchaImg" placeholder="请输入手机号码"></m-input>
				</view>
				
			</view>
			<!-- <view class="input-row2 border">
				<text class="title" style="margin-top: 5px;">图形验证码：</text>
				<m-input type="text" name="" placeholder="请输入图形验证码" v-model="vs_code" />
				<vscode :choosecode.sync="choosecode"></vscode>
			</view> -->
			<view class="input-row2 border">
				<text class="title" style="margin-top: 5px;">验证码：</text>
				<view class="flex pL10 borderb1">
					<m-input type="number" name="" placeholder="请输入短信验证码" v-model="message_code" />
					<button class="sb" :class="{ active: !disableCodeBtn }" :disabled="disableCodeBtn" @tap="sendCode">{{ codeBtn.text }}</button>
				</view>
				
				<!-- <text class="title" style="margin-top: 5px;">验证码：</text>
				<m-input type="number" name="" placeholder="请输入短信验证码" v-model="message_code" />
				<button class="sb" :class="{ active: !disableCodeBtn }" :disabled="disableCodeBtn" @tap="sendCode">{{ codeBtn.text }}</button> -->
			</view>
			<!-- <view class="input-row border" v-if="chphoneInfo.passwordchanger">
				<text class="title">密码：</text>
				<m-input :type="showpassword=='1'?'text':'password'" v-model="password" placeholder="请输入密码"></m-input>
				<view class="pR5" v-if="showpassword=='1'">
					<uni-icons type="eye" @click="changpwds()"  color='#007aff' size="20"/></uni-icons>
					
				</view>
				<view class="pR5" v-if="showpassword=='2'">
					<uni-icons type="eye" @click="changpwds()"  color='#c8c7cc' size="20"/></uni-icons>					
				</view>
			</view>
			<view class="input-row border" v-if="chphoneInfo.passwordchanger">
				<text class="title">确认密码：</text>
				<m-input :type="showpassword=='1'?'text':'password'" v-model="repassword" placeholder="请再次输入密码"></m-input>
				<view class="pR5" v-if="showpassword=='1'">
					<uni-icons type="eye" @click="changpwds()"  color='#007aff' size="20"/></uni-icons>
					
				</view>
				<view class="pR5" v-if="showpassword=='2'">
					<uni-icons type="eye" @click="changpwds()"  color='#c8c7cc' size="20"/></uni-icons>					
				</view>
			</view> -->
				<!-- <view class="" @click="changpwds()">
					密码显示隐藏
				</view> -->
			<!-- <view class="input-row">
                <text class="title">邮箱：</text>
                <m-input type="text" clearable v-model="email" placeholder="请输入邮箱"></m-input>
            </view> -->
		</view>
		<view class="btn-row w70 mauto" v-if="chphoneInfo.passwordchanger"><button type="primary" class="" @tap="testphone">{{chphoneInfo.submittext}}</button></view>
		<view class="btn-row w70 mauto" v-if="!chphoneInfo.passwordchanger"><button type="primary" class="" @tap="testphone">{{chphoneInfo.submittext}}</button></view>
		<!-- <view class="tRight w70 mauto pT10 " v-if="chphoneInfo.passwordchanger"  @click="testphone()">
		<span class="border_b">快速成为访客</span>	
		</view> -->
	</view>
</template>

<script>
import mInput from '../../components/m-input.vue';
import vscode from '../../components/vs_code.vue';
import request from '../../common/vmeitime-http/requstx.js'; //引进requst方法
import {userbind,uCAPTCHA,userinfo} from '@/common/api/user.js'
import graceChecker from '../../common/graceChecker.js';
import md5 from '../../common/md5.js';
import { isEmpty } from '@/common/graceChecker.js';
export default {
	components: {
		mInput,
		vscode
	},
	data() {
		return {
			showpassword:'2',
			account: '',
			password: '',
			repassword: '',
			email: '',
			captchaImg: '',
			message_code: '',
			seconds: 60,
			choosecode:"",
			vs_code:"",
			codeBtn: {
				text: '获取验证码',
				waitingCode: false,
				count: this.seconds
			},
			chphoneInfo:{
				uinfo:{},
				passwordchanger:true,
				title:'更换手机号',
				submittext:'确定'
			
			},
		};
	},
	onLoad(options){
		if(options.type=='chphone'){
			this.chphoneInfo.submittext = '更换手机号'
			// uni.setNavigationBarTitle({ title: title })
			this.chphoneInfo.uinfo = JSON.parse(options.tmpuinfo)
			this.captchaImg = this.chphoneInfo.uinfo.mobile
			this.chphoneInfo.passwordchanger = false
		}
	},
	methods: {
		// 显示与隐藏密码
		changpwds(){
			if(this.showpassword=='1'){
				this.showpassword='2';
			}else{
				this.showpassword='1';
			}
		},
		showuserinfo(){
			userinfo({}).then(res=>{//获取用户信息
				console.log(res)				
				uni.setStorageSync('userid', res.data.data.id);
				uni.setStorage({
				    key: 'headimgurl',
				
				    data: res.data.headimgurl
				});
				uni.setStorageSync('username', res.data.data.name);
				uni.setStorage({
				    key: 'isIdentitycard',
				    data: res.data.data.identitycard
				});
				uni.setStorage({
				    key: 'userInfo',
				    data: res.data
				});
				
				
			})
		},
		/*更换手机号*/
		chbindphone(){
			if (this.captchaImg.length < 11) {
				uni.showToast({
					icon: 'none',
					title: '请输入手机号'
				});
				return;
			}
			if (this.message_code.length < 6) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的验证码'
				});
				return;
			}
			userbind({
				mobile: this.captchaImg,
				message_code: this.message_code,
				type:'chphone'
			}).then(res=>{
				console.log(res)
				if(res.data.code == 200){
					uni.showToast({
						icon: 'none',
						title: '成功更换手机号:'+this.captchaImg
					});
				}
				uni.reLaunch({
					url: '/pages/user/userMessage'
				});
				
			})
			
			// request({
			// 	url: 'user/binding',
			// 	method: 'POST',
			// 	data: {
			// 		mobile: this.captchaImg,
			// 		// password: this.password,
			// 		// password_confirm: this.repassword,
			// 		message_code: this.message_code,
			// 		type:'chphone'
			// 	},
			// 	success: res => {
			// 		if (res.data.code == 400) {
			// 			uni.showToast({
			// 				title: res.data.message,
			// 				icon: 'none',
			// 				duration: 2000
			// 			});
			
			// 			if (res.data.message == 'token已过期') {
			// 				uni.hideLoading();
			// 				console.log(this.data.message);
			// 				uni.showToast({
			// 					title: this.data.message,
			// 					icon: 'none',
			// 					duration: 2000
			// 				});
			
			// 				window.location.href = this.weixinhttpurl+'/#/pages/shouquan/shouquan';
			// 			} else if (res.data.message == 'token不存在') {
			// 				uni.hideLoading();
			// 				console.log(this.data.message);
			// 				uni.showToast({
			// 					title: this.data.message,
			// 					icon: 'none',
			// 					duration: 2000
			// 				});
			
			// 				window.location.href = this.weixinhttpurl+'/#/pages/shouquan/shouquan';
			// 			}
			// 		} else if (res.data.message == '绑定成功') {
			// 			uni.reLaunch({
			// 				url: '/pages/user/userMessage'
			// 			});
			// 		}
			// 		console.log(res.data);
			// 	}
			// });
			
			
		},
		testphone(){
			if (this.captchaImg.length < 11) {
				uni.showToast({
					icon: 'none',
					title: '请输入手机号'
				});
				return;
			}
			if (this.message_code.length < 6) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的验证码'
				});
				return;
			}
			// if (this.password.length < 6) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '密码最短为 6 个字符'
			// 	});
			// 	return;
			// }
			// if (this.repassword.length < 6) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '密码最短为 6 个字符'
			// 	});
			// 	return;
			// }
			var sharecode=sessionStorage.getItem("sharecode");
			userbind({
				mobile: this.captchaImg,
				message_code: this.message_code,
				password: this.password,
				password_confirm: this.repassword,
				type:'testu',
				sharecode:sharecode,
			}).then(res=>{
				console.log(res)
				if(res.data.code == 200){
					uni.showToast({
						icon: 'none',
						title: '成功成为访客'
					});
					// uni.reLaunch({
					// 	url: '/pages/user/user'
					// });
					this.showuserinfo()
					sessionStorage.setItem("tokensession",'YES');
					var thisurl = sessionStorage.getItem("locationhref");
					if (thisurl) {
					    var newhrf = "/" + thisurl;
							sessionStorage.setItem("locationhref",'');
							sessionStorage.setItem("skippage",'') 
						
					    uni.reLaunch({
					        url: newhrf
					    });
					}else{
						uni.reLaunch({
							url:'/pages/shouquan/successful?type=yuyue'
						});
					}
				}else{
					
					uni.showToast({
						icon: 'none',
						title: res.data.message
					});
				}
				
				
			})
			
		},
		
		register: function() {
			/**
			 * 客户端对账号信息进行一些必要的校验。
			 * 实际开发中，根据业务需要进行处理，这里仅做示例。
			 */
			// uni.reLaunch({
			// 	url: '/pages/shouquan/shengfen'
			// });
			// return
			if (this.captchaImg.length < 11) {
				uni.showToast({
					icon: 'none',
					title: '请输入手机号'
				});
				return;
			}
			if (this.message_code.length < 6) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的验证码'
				});
				return;
			}
			// if (this.password.length < 6) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '密码最短为 6 个字符'
			// 	});
			// 	return;
			// }
			// if (this.repassword.length < 6) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '密码最短为 6 个字符'
			// 	});
			// 	return;
			// }
			// if (this.email.length < 3 || !~this.email.indexOf('@')) {
			//     uni.showToast({
			//         icon: 'none',
			//         title: '邮箱地址不合法'
			//     });
			//     return;
			// }

			const data = {
				account: this.account,
				password: this.password,
				email: this.email
			};

			request({
				url: 'user/binding',
				method: 'POST',
				data: {
					mobile: this.captchaImg,
					password: this.password,
					password_confirm: this.repassword,
					message_code: this.message_code,
					sharecode:sharecode,
				},
				success: res => {
					if (res.data.code == 400) {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						});

						if (res.data.message == 'token已过期') {
							uni.hideLoading();
							console.log(this.data.message);
							uni.showToast({
								title: this.data.message,
								icon: 'none',
								duration: 2000
							});

							window.location.href = this.weixinhttpurl+'/#/pages/shouquan/shouquan';
						} else if (res.data.message == 'token不存在') {
							uni.hideLoading();
							console.log(this.data.message);
							uni.showToast({
								title: this.data.message,
								icon: 'none',
								duration: 2000
							});

							window.location.href = this.weixinhttpurl+'/#/pages/shouquan/shouquan';
						}
					} else if (res.data.message == '绑定成功') {
						uni.reLaunch({
							url: '/pages/shouquan/shengfen'
						});
					}
					console.log(res.data);
				}
			});
		},
		/*更换手机号*/
		
		sendCode: function() {
			if(!this.codeBtn.waitingCode){
				this.codeBtn.waitingCode = true;
				this.codeBtn.count = this.seconds;
				this.codeBtn.text = this.codeBtn.count + 's后重新发送';
				
				let countdown = setInterval(() => {
					this.codeBtn.count--;
					this.codeBtn.text = this.codeBtn.count + 's后重新发送';
					if (this.codeBtn.count < 0) {
						clearInterval(countdown);
						this.codeBtn.text = '重新发送';
						this.codeBtn.waitingCode = false;
					}
				}, 1000);
				
				const data = {
					username: this.captchaImg
				};
				/*请求验证码*/
				uCAPTCHA({
					mobile: this.captchaImg
				}).then(res=>{
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					});
					
				})
			}
			
		},
		gotoLogin: function() {
			uni.navigateTo({
				url: 'login'
			});
		}
	},
	computed: {
		// disableCodeBtn: function() {
		// 	return this.codeBtn.waitingCode || this.captchaImg.length < 11;
		// }
		disableCodeBtn: function() {
			   var vs_code=this.vs_code.toUpperCase();
			   var choosecode=this.choosecode.toUpperCase();
			 console.log('code',vs_code!=choosecode)
			   console.log('captchaImg',this.captchaImg.length < 11)
			    return vs_code!=choosecode || this.captchaImg.length < 11;
			   // if (vs_code==choosecode){
				  //  return true;
			   // }else{
				  
			   // }  
			
		}
	}
};
</script>

<style>
.shoujiclass .uni-input-input{font-size: 14px;}
.shoujiclass .uni-input-placeholder{font-size: 14px;}
.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	/* background-color: #efeff4; */
}
.sb {
	font-size: 14px;
	width: 124px;
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	    line-height: 30px;
	    height: 30px;
		
    text-align: center;
}
.shoujiclass .input-row{padding: 15px 0;}
.shoujiclass .input-row .title{font-size: 16px;    width: 28%;}
.shoujiclass .btn-row{padding-top: 40px;}
.border_b{border-bottom: 1px solid #555555;}
.shoujiclass .input-row2{padding: 15px 0;display: block;}
.shoujiclass .input-row2 .title{font-size: 16px;    width: 28%;}
.shoujiclass .input-row2 .title {
    width: 22%;
    height: 27px;
    min-height: 27px;
    padding: 8px 0;
    padding-left: 16px;
    line-height: 27px;
}
</style>
